<template>
  <!-- 核酸检测信息 -->
  <view class="NAT-top">
    <view class="NAT-introduce">
      <image :src="nucleic_Data.data.logo" mode="" />
      <view class="text">
        <view class="name-text">{{ nucleic_Data.data.name }}</view>
        <view class="price-text">{{ nucleic_Data.data.price }}</view>
      </view>
    </view>
    <view class="NAT-boon">
      <view
        class="boon-lists"
        v-for="(item, index) in nucleic_Data.data.boon"
        :key="index"
      >
        <icon type="success" size="15" color="" />
        <text>{{ item }}</text>
      </view>
    </view>
  </view>
  <!-- 地址 -->
  <view class="NAT-address">
    <view class="left">
      <text class="hospital">{{ nucleic_Data.data.hospital }}</text>
      <text class="A_detail">{{ nucleic_Data.data.address }}</text>
    </view>
    <view class="right">
      <image src="/static/other/dianhua.svg" mode="widthFix"></image>
      <text class="text-color">电话</text>
    </view>
  </view>
  <!-- 输入框 -->
  <view class="input-group">
    <view class="line">
      <text>真实姓名</text>
      <input
        type="text"
        placeholder="请输入真实姓名"
        placeholder-class="placeholder-style"
        v-model="submit_Data.name"
      />
    </view>
    <view class="line">
      <text>手机号</text>
      <input
        type="text"
        placeholder="请输入手机号"
        placeholder-class="placeholder-style"
        v-model="submit_Data.phone"
      />
    </view>
    <view class="line">
      <text>身份证</text>
      <input
        type="text"
        placeholder="请输入身份证"
        placeholder-class="placeholder-style"
        v-model="submit_Data.id_card"
      />
    </view>
  </view>
  <!-- orderTime -->
  <view class="orderTime">
    <view class="title">选择预约时段</view>
    <view class="order-time">
      <view
        class="time-list"
        v-for="(item, index) in nucleic_Data.data.date"
        :key="index"
        @click="selectTime(index, item.date)"
        :class="{ selectClass: currentIndex == index }"
      >
        <text class="date">
          {{ item.date }}
        </text>
        <text class="week">
          {{ item.week }}
        </text>
      </view>
    </view>
  </view>
  <view class="bottom">
    <view class="title">咽拭子采集方式</view>
    <view
      class="coll_lists"
      v-for="(item, index) in nucleic_Data.data.style"
      :key="index"
    >
      <view class="method">{{ item.title }}</view>
      <view class="text-group">
        <text v-for="(subitem, i) in item.desc" :key="i">{{ subitem }}</text>
      </view>
    </view>
  </view>
  <view class="submit" @click="submit">
    <bottom-button :leftBtn="`检测费用: ￥20`" rightBtn="提交"></bottom-button>
  </view>
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs, toRaw } from "vue";
import apiRequest from "~/api";
import bottomButton from "~/components/bottomButton/bottomButton.vue";
import skIndex from "~/Skeleton/SK-nucleic.vue";

let nucleic_Data = reactive({ data: {} });
let skeLeton = ref(false);
onMounted(async () => {
  const res = await apiRequest.NuataGet();
  nucleic_Data.data = res.data[0];
  skeLeton.value;
});

let currentIndex = ref(null);

const selectTime = (i, date) => {
  currentIndex.value = i;
  submit_Data.time = date;
};

// 本页面所要提交的数据
let submit_Data = reactive({
  name: "",
  phone: "",
  id_card: "",
  time: "",
});

// 提交
async function submit() {
  uni.showLoading({ title: "提交中", mask: true });
  const res = await apiRequest.ResNuata(submit_Data);
  if (res.msg == "提交成功") {
    uni.hideLoading();
    uni.navigateTo({
      url: "/pages/submit-success/nucleic-acid/nucleic-acid",
    });
  }
}
</script>
<style>
/* 核酸检测顶部 */
.NAT-top {
  @apply bg-light-50;
  padding: 20rpx;
}
.NAT-top .NAT-introduce {
  @apply flex;
}
.NAT-introduce image {
  width: 120rpx;
  height: 120rpx;
}
.NAT-introduce .text {
  margin-left: 15rpx;
  @apply flex flex-col;
  justify-content: space-between;
  font-size: 36rpx;
}
.NAT-introduce .text .price-text {
  @apply text-red-500 font-bold;
  font-size: 34rpx;
}
.NAT-boon {
  @apply flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.NAT-boon .boon-lists {
  @apply flex;
  align-items: center;
}
.NAT-boon .boon-lists text {
  font-size: 28rpx;
  margin-left: 12rpx;
}
/* 地址区 */
.NAT-address {
  @apply flex bg-light-50;
  align-items: center;
  justify-content: space-between;
  margin: 20rpx;
  padding: 20rpx;
}
.NAT-address .left {
  @apply flex flex-col;
}
.NAT-address .left .hospital {
  margin-bottom: 20rpx;
}
.NAT-address .left .A_detail {
  font-size: 26rpx;
}
.NAT-address .right {
  @apply flex-col flex;
  align-items: center;
}
.NAT-address .right image {
  width: 40rpx;
  height: 40rpx;
}
.NAT-address .right text {
  font-size: 30rpx;
}
.input-group {
  padding: 0 20rpx;
  margin: 0 20rpx;
  @apply bg-light-50;
}
.line {
  height: 110rpx;
  @apply flex;
  align-items: center;
  border-bottom: 1px solid #dbd7d7;
}
.line:last-child {
  border: none;
}
.line text {
  margin-left: 20rpx;
}
.line input {
  @apply text-right;
  padding: 10rpx;
  flex: 1;
}
.orderTime {
  @apply bg-light-50;
  margin: 20rpx;
  padding: 20rpx;
}
.title {
  font-size: 34rpx;
  @apply font-bold;
  margin-bottom: 15rpx;
}
.order-time {
  @apply flex bg-light-50;
  overflow: auto;
}
/* 隐藏导航条 */
.order-time::-webkit-scrollbar {
  display: none;
}
.order-time .time-list {
  @apply flex flex-col flex-wrap;
  flex-shrink: 0;
  padding: 20rpx 25rpx;
  border-radius: 20rpx;
}
.bottom {
  margin: 20rpx;
  padding: 20rpx;
  @apply bg-light-50;
}
.coll_lists .method {
  background-color: #0176ff;
  color: #ffffff;
  border-radius: 10rpx;
  padding: 5rpx 10rpx;
  font-size: 28rpx;
  display: inline-block;
  margin: 10rpx 0;
}
.text-group {
  display: flex;
  flex-direction: column;
}
.coll_lists:last-child .text-group {
  padding-bottom: 300rpx;
}
.text-group text {
  margin-bottom: 30rpx;
}
.submit {
  position: fixed;
  bottom: 0;
  @apply fixed bottom-0 right-0 left-0;
}
bottom-button /deep/ .leftBtn {
  @apply text-red-400 bg-light-50 font-bold;
}
</style>
